<template>
    <div>

            <ve-map    width="800"  height="600px"  :data="chartData" :geo="chartGeo"
                       :log="true"  :events="chartEvents"
                       :settings="chartSettings"></ve-map>


        <el-tag type="success"   >{{cityName}}</el-tag>




        <el-drawer

                :visible.sync="drawer.isOpen"
                direction="btt"
                size="50%"
                >
            <slot name="title">
                <template>
                    <div>{{cityName+'疫情趋势图'}}</div>
                </template>
            </slot>
            <ve-line
                    :data="clickEventData"
                    :toolbox="clickEventToolbox">
            </ve-line>

        </el-drawer>


    </div>

</template>

<script>
    import moment from "moment"
    export default {

        created:function () {

            this.time =  moment(new Date()).format("M-d-YY");
            console.log("time:"+this.time)
            this.geoResource=  this.$resource('http://localhost:8080/api/search_time/{time}');
            this.cityName="请选择";
            this.getData();
            this.chartData= {
                columns: ['位置', '感染人数'],
                    rows:this.globalData
            };
            // this.chartData=this.globalData;
                console.log(this.chartData)

        },
        mounted:function(){
            this.cityName="请选择";

            console.log(this.chartData)
        },

        methods:{

            selectColor(t){
                if(t===0)
                {
                    return  'rgb(255,255,255)'
                }else if (t<=100)
                {
                    return    'rgb(255,190,192)'
                }else if (t<=500)
                {
                    return 'rgb(255,105,102)'
                }else {
                    return 'rgb(255,28,28)'
                }
            },
            getData(){
                    this.geoResource.get({
                        time:this.time
                    })
                    .then(function (res) {
                        console.log(res);
                        for (let i  in  res.data)
                        {
                            this.globalData.push({
                                "位置":i,
                                "感染人数":res.data[i].number,
                                itemStyle:{
                                    color:this.selectColor(res.data[i].number)
                                }
                            })
                        }

                    });
            }
        },


        data () {
            this.chartGeo = {
                map: 'world',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                },
                regions:[
                    {
                        name:'China',
                        itemStyle: {
                            areaColor: 'red',
                            color: 'red'
                        },
                        label:{
                            show:true
                        },
                        formatter: '{b}: {@感染人数}'
                    }
                ]
            };
            this.chartEvents = {
                click: (v) => {
                    this.cityName = v.name;
                    this.drawer.isOpen=true;
                    let sevenDayRequest  = this.$resource('http://localhost:8080/api/search_country/seven_day/{country}');
                    sevenDayRequest.get({country:v.name})
                    .then(function (res) {
                        console.log(res.data)
                       let mapData =[
                           {
                               "日期":"第一天",
                               "感染人数":res.data.dayOne
                             },
                        {
                            "日期":"第二天",
                            "感染人数":res.data.dayTwo
                        },
                           {
                               "日期":"第三天",
                               "感染人数":res.data.dayThree
                           },
                           {
                               "日期":"第四天",
                               "感染人数":res.data.dayFour
                           },
                           {
                               "日期":"第五天",
                               "感染人数":res.data.dayFive
                           },
                           {
                               "日期":"第六天",
                               "感染人数":res.data.daySix
                           },
                           {
                               "日期":"第七天",
                               "感染人数":res.data.daySeven
                           },
                       ] ;
                        this.clickEventData.rows = mapData;

                    })

                }

            };
            this.chartSettings = {
                render:'svg',
                position: "world",
                dimension: '位置',
                metrics: ['感染人数'],
                dataType: {
                    '感染人数': 'KMB'
                },
                label:{
                    show:true,
                    color:"auto"
                },
                color:"auto",
                selectedMode:"single",
                roam:true,
                aspectScale:0.75,

                itemStyle:{
                  borderColor:"#933e47",
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    opacity:0.3
                },
                emphasis:{
                    opacity:0.9
                },

            };
            return {
                state1:'',
                globalData:[],
                clickEventData:{
                    columns: ['日期','感染人数'],
                    rows:[]
                },
                clickEventToolbox:{feature: {
                        magicType: {type: ['line', 'bar']},
                        saveAsImage: {}
                    }},
                cityName: '',
                drawer:{
                    isOpen:false,

                },

            }
        }
    }
</script>